<template>
  <div>
    <div class="nav">
      <div class="details">明细</div>
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="formData.category"
          @change="categoryLoad"
          :options="option"
        />
      </van-dropdown-menu>
    </div>
    <van-pull-refresh
      v-model="refreshing"
      success-text="刷新成功"
      @refresh="onLoad"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list">
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <div class="data">
                {{ item.category === "INCOME" ? "+" : "" }}{{ item.num }}
              </div>
              <div class="floatData">
                {{ item.desc }}
              </div>
              <div class="time">{{ item.createTime | formatDate }}</div>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { assetsLog } from "@/api/myAssets";
import { formatDate } from "@/assets/js/date";
import { DropdownMenu, DropdownItem, PullRefresh, List } from "vant";
export default {
  components: {
    [PullRefresh.name]: PullRefresh,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
  },
  props: {
    assetsType: {
      type: String,
    },
    assetsList: {},
  },
  data() {
    return {
      formData: {
        assetsType: this.assetsType,
        category: "",
      },
      refreshing: false,
      loading: false,
      finished: false,
      option: [
        { text: "全部", value: "" },
        { text: "收益收入", value: "INCOME" },
        { text: "收益支出", value: "DISBURSE" },
      ],
      list: [],
    };
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  methods: {
    categoryLoad() {
      this.list = [];
      this.loading = true;
      this.finished = false;
      this.onLoad();
    },
    getAssetsList() {
      if (this.assetsList) {
        return this.assetsList(this.formData);
      } else {
        return assetsLog(this.formData);
      }
    },
    onLoad() {
      this.getAssetsList().then((res) => {
        this.loading = false;
        this.refreshing = false;
        this.finished = true;
        this.list = res.data.resultData;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.van-dropdown-menu {
  float: right;
  padding-right: 10px;
  /deep/.van-dropdown-menu__bar {
    box-shadow: none;
  }
}
/deep/.van-loading {
  margin: 0;
}

.van-list {
  min-height: 45vh;
}

.details {
  display: inline-block;
  margin: 14px 0;
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
}
.list {
  ul {
    li {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      .data,
      .floatData {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
      .time {
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 17px;
      }
    }
  }
}
</style>